<template>
  <view class="loader-wrapper">
    <view v-if="loading" class="loader-container">
      <view class="loader-content">
        <LoadingSpinner />
        <text class="loader-text">{{ text }}</text>
      </view>
    </view>
    <slot v-else></slot>
  </view>
</template>

<script>
import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.vue'
export default {
  name: 'Loader',
  components: { LoadingSpinner },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '加载中...'
    }
  }
}
</script>

<style scoped lang="css">
.loader-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.loader-container {
  position: relative;
  width: 100%;
  min-height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  padding: 40rpx 20rpx;
  text-align: center;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-text {
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}
</style>
